<template>
	<div>
		<van-image width="100%" :src="APIDomainName + product.picture" style="width: 100%;position: relative;">
		</van-image>
		<div style="background-color:#ffffff;border-radius: 2rem;position: relative;top: -8rem;">
			<div style="width: 90%;padding: 1rem 5% 0.5rem 5%;">
				<div style="display: flex;margin: 1rem auto 0;align-items: center;justify-content: space-between;">
					<div style="display: flex;align-items: center;width: 65%;">
						<div style="width: 30%;">
							<van-image width="100%" radius="20px" :src="APIDomainName + product.pic"></van-image>
						</div>
						<div style="margin-left: 5%;">
							<div style="font-weight: bold;font-size: 26px;">{{product.title}}</div>
							<div style="margin-top: 0.5rem;color: #999999;font-weight: bold;">
								{{product.label}}
							</div>
						</div>
					</div>
					<div  style="width: 25%;text-align: center;font-size: 40px;color: red;font-weight: bold;">
						<van-button round  v-if="isAppoint" @click="onClickAddAppoint()"
							style="background-color: #01CBE2; color: #ffffff;width: 100%;font-weight: bold;font-size: 18px;border: 0;">
							预约
						</van-button>
						<van-button round v-else @click="onClickCancelAppoint()"
							style="background-color:rgba(8, 6, 30, 0.3); color: #ffffff;width: 100%;font-weight: bold;font-size: 18px;">
							已预约
						</van-button>
					</div>
				</div>
			</div>
			<div>
				<!-- <div style="width: 90%;margin:0 auto;font-size: 22px;text-align: center;">详情</div>
				<div style="width: 2.5rem;height:0.3rem;margin:0 auto;text-align: center;background-color: #01CBE2;border-radius: 20px;font-weight: bold;"></div>
			 -->	<div style="width: 90%;padding: 0 5% 0 5%;margin-top: 1.5rem ;">
					<van-swipe :autoplay="3000" style="border-radius: 1rem;">
						<van-swipe-item v-for="(img,i) in carouselList" :key="i">
							<van-image width="100%" :src="APIDomainName + img"></van-image>
						</van-swipe-item>
					</van-swipe>
				</div>
				<div style="width: 90%;padding: 1.5rem 5% 0 5%;">
					<div style="font-size: 24px;font-weight: bold;">简介</div>
					<div style="color: #999999;margin-top: 0.5rem;">{{product.detail}}</div>
					<div style="font-size: 24px;font-weight: bold;margin-top: 1.5rem;">详细信息</div>
					<van-cell-group>
						<van-cell title-class="messagetitle" value-class="messagevalue" title="厂商"
							:value="product.company" />
						<van-cell title-class="messagetitle" value-class="messagevalue" title="供应商"
							:value="product.provider" />
						<van-cell title-class="messagetitle" value-class="messagevalue" title="网络"
							:value="product.internet" />
					</van-cell-group>
				</div>
			</div>
		</div>

	</div>
</template>



<script>

	import {
		getAppointmentDetailByIdAPI,
		addAppointmentAPI,
		deleteAppointmentAPI,
		ischeckedAppointmentAPI
	} from "@/api/appointment.js";
	export default {
		
		data() {
			return {
				product: {},
				carouselList:[],
				isAppoint:true,
			}
		},
		methods: {
			onClickAddAppoint() {
				this.isAppoint = false;
				let params = {
					appointment_id: this.product.id,
				};
				//2.使用封装后的接口,注意：接口有参数
				addAppointmentAPI(params).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
			},
			onClickCancelAppoint() {
				this.isAppoint = true;
				let ids = this.product.id;
				deleteAppointmentAPI(ids).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
			},
		},
		created() {
			let id = this.$route.params.id;
			getAppointmentDetailByIdAPI(id).then((result) => {
				console.log(result);
				this.product = result.data;
				//根据返回数据生成轮播图数组（用商品的中图片）
				this.product.picList.forEach(item => {
					this.carouselList.push(item.pic);
				}); //数据的遍历

			})
			let params = {
				appointment_id: this.$route.params.id,
			};
			//2.使用封装后的接口,注意：接口有参数
			ischeckedAppointmentAPI(params).then(result => {
				// this.$toast(result.msg);
				let is_checked = result.data[0].is_checked;
				if (is_checked == 1) {
					this.isAppoint = false;
				} else {
					this.isAppoint = true;
				}
			}).catch(() => {});
			
		},
	}
</script>



<style lang="less" scoped>
	.van-swipe {
		margin: 0 auto;
	}

	.van-swipe__indicator--active {
		background-color: #01CBE2;
	}

	.messagevalue {
		font-size: 16px;
	}

	.messagetitle {
		font-size: 16px;
	}

	[class*=van-hairline]::after {
		border: 0 solid #ebedf0;
	}

	.van-cell-group .van-cell {
		padding-left: 0;
		padding-right: 0;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		/* background-color: #39a9ed; */
	}
</style>
